<template>
  <div class="weather-container">
    <span @click="flushLocation" class="location-info">
      <el-icon>
        <LocationInformation/>
      </el-icon>
      <span>{{ weatherInfo.area }}</span>
    </span>
    <span class="separator">|</span>
    <span class="weather-text">{{ weatherInfo.weather }}</span>
    <img class="weather-icon" :src="weatherInfo.weather_pic"/>
    <span class="temperature">{{ weatherInfo.temperature }}°C</span>
    <span class="separator">|</span>
    <span class="wind-info">{{ weatherInfo.wind_direction }}</span>
    <span class="wind-info">{{ weatherInfo.wind_power }}</span>
    <span class="separator">|</span>
    <el-tag :type="tagType" effect="dark" class="quality-tag">{{ weatherInfo.quality }}</el-tag>
    <div v-if="isLoading" class="loading">加载中...</div>
    <div v-if="errorMessage" class="error-message">{{ errorMessage }}</div>
  </div>
</template>

<script setup>
import {computed, onMounted, reactive, ref} from "vue";
import axios from "axios";
import {LocationInformation} from "@element-plus/icons-vue";
import {ElMessage} from "element-plus";
import qing from '@/assets/weather/晴.png';
import cloudy from '@/assets/weather/多云.png';
import overcast from '@/assets/weather/阴.png';
import shower from '@/assets/weather/阵雨.png';
import thunder_shower from '@/assets/weather/雷阵雨.png';
import sleet from '@/assets/weather/雨夹雪.png';
import light_rain from '@/assets/weather/小雨.png';
import moderate_rain from '@/assets/weather/中雨.png';
import heavy_rain from '@/assets/weather/大雨.png';
import heavy_rainstorm from '@/assets/weather/暴雨.png';
import snow from '@/assets/weather/雪.png';
import fog from '@/assets/weather/雾.png';
import haze from '@/assets/weather/霾.png';

const errorMessage = ref(""); // 错误信息
const isLoading = ref(false); // 加载状态
const weatherInfo = reactive({
  area: '',
  temperature: '',
  weather: '',
  weather_pic: '',
  wind_direction: '',
  wind_power: '',
  quality: ''
});

// 高德地图Web服务API密钥
const gaodeKey = "54a94cd0abeb4219067be1f3385406ca";
const HUANGDAO_ADCODE = '370211'; // 黄岛区的 adcode

// 天气图标映射
const weatherIcons = {
  '晴': qing,
  '多云': cloudy,
  '阴': overcast,
  '阵雨': shower,
  '雷阵雨': thunder_shower,
  '雨夹雪': sleet,
  '小雨': light_rain,
  '中雨': moderate_rain,
  '大雨': heavy_rain,
  '暴雨': heavy_rainstorm,
  '雪': snow,
  '雾': fog,
  '霾': haze
};

// 计算属性，根据空气质量动态返回 tag 类型
const tagType = computed(() => {
  switch (weatherInfo.quality) {
    case '优':
    case '良':
      return 'success';
    case '轻度污染':
    case '中度污染':
      return 'warning';
    case '重度污染':
    case '严重污染':
      return 'danger';
    default:
      return 'info';
  }
});


// 获取天气信息
const getWeather = async () => {
  isLoading.value = true;
  try {
    const response = await axios.get(`https://restapi.amap.com/v3/weather/weatherInfo?key=${gaodeKey}&city=${HUANGDAO_ADCODE}&extensions=base`);

    if (response.data.status === '1' && response.data.lives && response.data.lives.length > 0) {
      const weatherData = response.data.lives[0];

      weatherInfo.area = weatherData.city;
      weatherInfo.temperature = weatherData.temperature;
      weatherInfo.weather = weatherData.weather;
      weatherInfo.weather_pic = weatherIcons[weatherData.weather] || 'https://webapi.amap.com/images/weather/unknown.png';
      weatherInfo.wind_power = weatherData.windpower + '级';
      weatherInfo.wind_direction = weatherData.winddirection + '风';
      weatherInfo.quality = '良';

      localStorage.setItem("weather", JSON.stringify(weatherInfo));
    } else {
      throw new Error('获取天气数据失败');
    }
  } catch (error) {
    console.error('获取天气信息失败：', error);
    errorMessage.value = "无法获取天气信息。";
    ElMessage.error("无法获取天气信息！");
  } finally {
    isLoading.value = false;
  }
};

// 初始化
const weather = localStorage.getItem('weather');
if (weather) {
  try {
    Object.assign(weatherInfo, JSON.parse(weather));
  } catch (e) {
    getWeather();
  }
} else {
  getWeather();
}
</script>

<style scoped>
.weather-container {
  display: flex;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.1);
  padding: 8px 12px;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin: 10px;
  font-size: 16px;
  flex-wrap: wrap;
}

.location-info {
  display: flex;
  align-items: center;
  cursor: pointer;
  margin-right: 8px;
  font-size: 16px;
  font-weight: bold;
  color: white;
}

.location-info:hover {
  color: #0072c6;
}

.weather-text {
  margin: 0 5px;
  font-size: 16px;
  font-weight: bold;
  color: white;
}

.weather-icon {
  width: 30px;
  height: 30px;
  vertical-align: middle;
  margin: 0 5px;
}

.temperature {
  font-weight: bold;
  margin: 0 5px;
  font-size: 16px;
  color: white;
}

.wind-info {
  margin: 0 8px;
  font-size: 16px;
  font-weight: bold;
  color: white;
}

.quality-tag {
  margin: 0 8px;
  font-size: 16px;
  color: white;
  padding: 0 8px;  /* 增加标签内边距 */
}

.loading {
  font-size: 14px;
  color: #409eff;
  font-weight: bold;
  margin-left: 10px;
}

.error-message {
  color: red;
  font-weight: bold;
  margin-top: 10px;
  width: 100%;
}

.separator {
  color: white;
  margin: 0 8px;
}
</style>
